<template>
  <div v-title data-title="盘点工作台" v-loading="gLoad">
    <el-card class="box-card" shadow="hover">
      <div>
        <el-input
          v-model="scanInput"
          :placeholder="scanInputPlaceholder"
          class="headerInputClass"
          @keydown.enter.native="enterScanInput()"
          ref="scanInputfocus"
          @focus="$event.currentTarget.select()"
          autofocus="autofocus"
        >
        </el-input>
      </div>
      <div>
        <el-descriptions class="margin-top" border :column="3">
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="盘点单号"
          >
            {{ BillId }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="商品编码"
          >
            {{ CurrentGoods.SkuId }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="批次号"
          >
            {{ CurrentGoods.BatchNo }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="供方代码"
          >
            {{ CurrentGoods.DUDF12 }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="商品描述"
          >
            {{ CurrentGoods.SkuName }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-row :gutter="12" class="box-card card_box">
      <el-col :span="7">
        <el-card shadow="hover" class="imageClass_detail">
          <div slot="header" class="clearfix">
            <span
              >容器位置[<span style="color: red">{{ CurrentGoods.CID }}</span
              >]</span
            >
          </div>
          <div class="rotateClass">
            <el-image :src="Imag.OriginalCIDImag" lazy>
              <div slot="error" class="image-slot"></div>
            </el-image>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="box-card_detail">
          <div slot="header" class="clearfix">
            <span>数量信息</span>
          </div>
          <div>
            <div class="ItemNumInfo" @click="clickCalculator()">
              <span>{{ scansNum }}</span
              ><span>/{{ scansTotalNum }}</span>
            </div>
            <br /><br />
            <div class="ItemNumlabel">盘点数量<span>/实际库存</span></div>
            <div class="ItemNumInfoDetail" v-show="false">
              单位：{{ CurrentGoods.Unit }}
            </div>
            <div class="ItemNumInfoDetail" v-show="false">
              规格：<span>{{ CurrentGoods.Spec }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="11">
        <el-card shadow="hover" class="imageClass_detail">
          <div slot="header" class="clearfix">
            <span
              >货架位置[<span style="color: red">{{ CurrentGoods.ToLoc }}</span
              >]</span
            >
          </div>
          <div class="image_Or" @click="clickPtl()">
            <el-image
              class="TargetLocationImag1"
              :src="Imag.ExchangeAreaImag"
              lazy
            >
            </el-image>
            <el-image
              :src="Imag.OriginalLocationImag"
              class="TargetLocationImag"
              lazy
            ></el-image>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="never" class="card_button">
      <!-- <el-button @click='PrintBarcode()' disabled>打印条码</el-button> -->
      <el-button
        type="danger"
        class="buttonClass"
        @click="CompleteTaskButton()"
        :loading="submit.loading"
        >强制完成</el-button
      >
      <el-button
        type="primary"
        class="buttonClass"
        @click="CompleteTaskCIDButton()"
        :loading="submit.loading"
        :disabled="CurrentGoods && CurrentGoods.BillId == undefined"
        >完成容器</el-button
      >

      <span style="margin-left: 30px"
        >工作台: {{ UserInfo.WbInfo.WbName }}</span
      >
    </el-card>
    <!-- 数字输入  -->
    <el-dialog :visible.sync="CalculatorDialogVisible" width="30vw">
      <Calculator v-on:clickCardOk="clickCardOk" />
    </el-dialog>
    <!-- 扫描SKU错误提示 -->
    <el-dialog
      title="提示"
      :visible.sync="scanSkuDialogVisible"
      width="30%"
      center
      class="scanSkuDialog"
      :lock-scroll="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <span>请确定扫描的商品是否正确！[{{ CurrentGoods.SkuId }}]</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="scanSkuDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <audioPaly :audioValue="audioPaly"></audioPaly>
  </div>
</template>

<script>
import Arithmetic from '@/utils/ArithmeticMethod.js'
import {
  GETLocationInfo,
  GetCIDInfo,
  getInventoryTaskInfo,
  getInventoryScanTaskInfo,
  putInventoryScanTaskInfo,
  postInventoryScanTaskInfo,
  GetSkuBatchNoInfo
} from '@/api/api.js'
import Calculator from '@/components/pluginunit/Calculator.vue'
import audioPaly from '@/components/pluginunit/audioPaly.vue'
export default {
  name: 'InventoryOPT',
  props: ['searchVal'],
  components: {
    Calculator,
    audioPaly
  },
  data () {
    return {
      submit: {
        loading: false
      },
      BatchNoInfo: [],
      BatchNo: '',
      BatchNoFlag: false,
      BatchSelectdialogVisible: false,
      scanSkuDialogVisible: false,
      disabledFlag: true,
      disabledFlagTask: true,
      audioPaly: '',
      // 扫描框内容
      scanInput: '',
      // 扫描框当前扫描类型
      scanType: 'OrderID',
      scanInputPlaceholder: '',
      scanInputFlag: true,
      scanInputType: {
        'OrderID': '暂无需要扫描的订单.....',
        'SkuID': '请扫描商品编码.....',
        'BatchNo': '请选择批次编码.....',
        'CID': '请扫描容器编码.....',
        'OK': '请确认数量后点完成.....',
        'BoxCode': '请扫描容器格口编码.....'
      },
      gLoad: false,
      // 指定目标库位和目标箱
      TargetBox: '',
      TargetLocation: '',
      Imag: {
        OriginalLocationImag: '',
        OriginalCIDImag: '',
        TargetLocationImag: '',
        TargetCIDImag: ''
      },
      // 当前扫描商品信息（显示）
      CurrentGoods: {
        BillId: '',
        SkuInfo: [],
        SkuName: '',
        ImgUrl: '',
        BatchNo: '',
        BoxCode: ''
      },
      ImgUrl: '',
      BillId: '',
      // 全部应扫描商品
      AllGoods: [],
      // 剩余应扫描商品
      ScannedGoods: [],
      // 扫描记录
      ScanRecord: [],
      // 页面显示应扫描数
      scansTotalNum: 0.0,
      // 页面显示当前已扫描数
      scansNum: 0.0,
      // 输入框标识
      CalculatorDialogVisible: false,
      UserInfo: {
        WbInfo: {
          WbName: ''
        }
      },
      CommitFrom: {
        CID: '',
        LocationId: ''
      },
      skuId: '',
      WarehouseId: '',
      StorerId: '',
      OperationFlag: true,
      goodsInfo: {},
      timer: '',
      SkuScanCurr: '',
      localhostPath: '',
      ptl_url: 'ws://localhost:13145/Ptl',
      print_url: 'ws://localhost:13145/Print?UserId=',
      login_url: "ws://localhost:13145/Login?UserId=",
      ColorEnum: {
        red: 1,
        green: 2,
        blue: 3,
        yellow: 4,
        pink: 5,
        cyan: 6,
        white: 7
      },
      ws: {
        ptl_ws: null,
        print_ws: null,
        login_ws: null
      },
      setIntervalWesocketPush: {
        ptl_ws: null,
        print_ws: null,
        login_ws: null
      },
    }
  },
  created () {
    window.removeEventListener('onmessageWS', this.getSocketData);
    this.UserInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.init()
    this.gLoad = true;
    setTimeout(() => {
      this.GETTaskInfo()
      this.gLoad = false;
    }, 500)
    //this.scanInputMethod(this.scanType)
    this.getUrlPath();
  },
  beforeDestroy () {
    //离开页面移除监听器页面销毁时，移除监听器，这样就不会导致重复监听。
    window.removeEventListener('onmessageWS', this.getSocketData);
    clearTimeout(this.timer)
  },
  methods: {
    GETTaskTimer () {
      this.timer = setTimeout(() => {
        this.GETTaskInfo()
      }, 15000)
    },
    GETTaskInfo () {
      const params = {
        UserId: this.UserInfo.UserId,
        WbId: this.UserInfo.WbInfo.WbId,
        time: Date.parse(new Date())
      }
      this.gLoad = true;
      getInventoryTaskInfo(params).then(res => {
        const result = res.data.data
        var goodsInfo = {}
        if (res.data.code == 0 && result.length != 0) {
          this.audioPlay('ok')
          this.AllGoods = result
          this.BillId = result[0].BillId
          this.StorerId = result[0].StorerId
          this.WarehouseId = result[0].WarehouseId
          this.CurrentGoods = JSON.parse(JSON.stringify(result[0]))
          try {
            this.CurrentGoods.UpcCodes = this.CurrentGoods.UpcCodes.split(',')
            let getLocation = this.CurrentGoods.UpcCodes.indexOf("");
            this.CurrentGoods.UpcCodes.splice(getLocation, 1);
            this.CurrentGoods.UpcCodes.push(this.CurrentGoods.SkuId)
          } catch (e) {
            this.CurrentGoods.UpcCodes = [this.CurrentGoods.SkuId.toString()]
          }
          this.LocationSearch(this.CurrentGoods.ToLoc, 'OriginalLocationImag')
          this.ImageCIDSearch(this.CurrentGoods.BoxCode == '' ? this.CurrentGoods.CID : this.CurrentGoods.BoxCode, 'OriginalCIDImag', true)
          this.scansTotalNum = parseFloat(this.CurrentGoods.Qty)
          this.CurrentGoods.QtyIn = 0
          this.disabledFlagTask = false
          this.PTL_Lighting(this.CurrentGoods.ToLoc, this.ColorEnum.green, this.CurrentGoods.Qty)
          this.scanInputMethod('CID')
          this.ScanCID(this.CurrentGoods.CID)
        } else {
          this.scanInputMethod('OrderID', true)
        }
        this.gLoad = false;
      }).catch(error => {
        this.scanInputMethod('OrderID')
        throw error
      })
    },
    // 完成本单
    CompleteTaskButton () {
      this.submit.loading = true
      this.$confirm('此操作会将已到站台托盘返回库区，结束盘点，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.CurrentGoods.UserId = this.UserInfo.UserId
        this.CurrentGoods.time = Date.parse(new Date())
        const params = this.CurrentGoods
        postInventoryScanTaskInfo(params).then(res => {
          const result = res.data.data
          if (res.data.code == 0) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
            this.audioPlay('success')
            this.scanInputMethod('OrderID')
            this.GETTaskInfo()
          } else {
            this.audioPlay('error')
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        }).catch(error => {
          throw error
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      this.submit.loading = false
    },
    // 完成容器
    CompleteTaskCIDButton () {
      this.submit.loading = true
      this.CurrentGoods.UserId = this.UserInfo.UserId
      this.CurrentGoods.time = Date.parse(new Date())
      const params = this.CurrentGoods
      console.log('完成任务', this.CurrentGoods)
      putInventoryScanTaskInfo(params).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
          this.PTL_OFF(this.CurrentGoods.ToLoc, true)
          this.audioPlay('success')
          this.scanInputMethod('OrderID')
          this.GETTaskInfo()
        } else {
          this.audioPlay('error')
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      }).catch(error => {
        throw error
      })
      this.submit.loading = false
    },
    ScanCID (value) {
      this.gLoad = true;
      if (this.CurrentGoods.CID != value) {
        this.audioPlay('error')
        this.$message({
          message: '托盘错误，请按照指定托盘理货',
          type: 'error'
        });
        this.gLoad = false;
        return
      }
      this.scanInputMethod('SkuID')
      this.ScanSku(this.CurrentGoods.SkuId)
      //   this.scanInputMethod(this.CurrentGoods.BoxCode == '' ? 'SkuID' : 'BoxCode')
      //   this.disabledFlag = !this.CurrentGoods.BoxCode == ''
      this.audioPlay('ok')
      this.gLoad = false;
    },
    ScanBoxCode (value) {
      this.gLoad = true;
      if (this.CurrentGoods.BoxCode != value) {
        this.audioPlay('error')
        this.$message({
          message: '格口位置错误，请按照指定格口理货',
          type: 'error'
        });
        this.gLoad = false;
        return
      }
      this.scanInputMethod('SkuID')
      this.disabledFlag = false
      this.audioPlay('ok')
      this.gLoad = false;
    },
    // 扫描SKU
    ScanSku (value) {
      this.gLoad = true;
      if (Array.isArray(this.CurrentGoods.UpcCodes) && this.CurrentGoods.UpcCodes.indexOf(value) == -1) {
        this.audioPlay('error')
        this.$message({
          type: 'error',
          message: '物料UPC不在库存'
        });
        this.gLoad = false;
        return
      }
      this.CurrentGoods.QtyIn = parseFloat(this.CurrentGoods.Qty)
      this.scansNum = this.CurrentGoods.QtyIn
      this.scanInputMethod('OK')
      this.gLoad = false;
    },
    // 判断应扫描数是否大于等于输入扫描数
    clickCardOk (value) {
      this.CurrentGoods.QtyIn = parseFloat(value)
      this.scansNum = this.CurrentGoods.QtyIn
      this.CalculatorDialogVisible = false
    },
    BatchNoFlagfun () {
      this.BatchNoFlag = true
      if (this.CurrentGoods.BatchNo == '无批次信息') {
        this.CurrentGoods.BatchNo = ''
      }
    },
    // WEBSOCKET 开始
    async init (socket_type = true, connect_num = 0) {
      if (socket_type === true || socket_type === 'ptl_ws') {
        this.ws.ptl_ws = null;
        this.ws.ptl_ws = new WebSocket(this.ptl_url);
        this.ws.ptl_ws.currSocketId = 'ptl_ws'
        this.ws.ptl_ws.connect_num = connect_num
        this.ws.ptl_ws.currSocketName = '库位灯程序'
        this.ws.ptl_ws.onopen = this.ws_connect
        this.ws.ptl_ws.onmessage = this.PtlOnMessage
        this.ws.ptl_ws.onerror = this.ws_error
      }
      if (socket_type === true || socket_type === 'login_ws') {
        this.ws.login_ws = null;
        this.ws.login_ws = new WebSocket(this.login_url + this.UserInfo.UserId);
        this.ws.login_ws.currSocketId = 'login_ws'
        this.ws.login_ws.currSocketName = 'WET登录'
        this.ws.login_ws.onopen = this.ws_connect
        this.ws.login_ws.connect_num = connect_num
        this.ws.login_ws.onmessage = function (e) {
          console.log('登录在线.....');
        };
        this.ws.login_ws.onerror = this.ws_error
        this.ws_connect_login()
      }
      if (socket_type === true || socket_type === 'print_ws') {
        this.ws.print_ws = null;
        this.ws.print_ws = new WebSocket(this.print_url + this.UserInfo.UserId);
        this.ws.print_ws.currSocketId = 'print_ws'
        this.ws.print_ws.connect_num = connect_num
        this.ws.print_ws.currSocketName = '打印机程序'
        this.ws.print_ws.onopen = this.ws_connect
        this.ws.print_ws.onmessage = function (e) {
          console.log('打印机_OnMessage');
        };
        this.ws.print_ws.onerror = this.ws_error
      }
    },
    ws_error (e) {
      this.onerrorWS(e.currentTarget)
    },
    onerrorWS (ws) {
      clearInterval(this.setIntervalWesocketPush[ws.currSocketId])
      console.log(ws.currSocketName, ws)
      if (ws.readyState === 3 && ws.connect_num < 3) {
        this.$message({
          message: ws.currSocketName + '连接失败,重连中......',
          type: 'error'
        });
        setTimeout(() => {
          this.init(ws.currSocketId, ws.connect_num + 1)
        }, 10000)
      } else {
        this.$message({
          message: '' + ws.currSocketName + '连接失败，无法重新连接，请联系管理员！',
          type: 'error'
        });
      }
    },
    ws_connect (e) {
      this.sendPing(e.currentTarget)
    },
    ws_connect_login () {
      if (this.ws.login_ws.readyState === 1) {
        var command = {
          RemoteUrl: this.UserInfo.RemoteUrl,
        };
        this.ws.login_ws.send(JSON.stringify(command));
      } else {
        setTimeout(() => {
          this.ws_connect_login()
        }, 1500)
      }
    },
    sendPing (ws, time = 15000, ping = 'ping.....') {
      console.log(ws.currSocketName + ' 连接成功......')
      clearInterval(this.setIntervalWesocketPush[ws.currSocketId])
      this.setIntervalWesocketPush[ws.currSocketId] = setInterval(() => {
        ws.send(ping)
      }, time)
    },
    PtlOnMessage (e) {
      const data = JSON.parse(e && e.data)
      console.log(data)
      if (data.Type === 'PTL_Lighting') {
        var Loc = data.Id.split('_')[0]
        if (data.Code == 0) {
          this.$message({
            type: 'success',
            message: '【' + Loc.toString() + '】,亮灯成功!'
          });
        } else {
          this.$message({
            type: 'error',
            message: Loc.toString() + ' _ ' + data.Message.toString() + ',亮灯失败!'
          });
        }
      }
      else if (data.Type === 'PTL_Close') {
        console.log('PTL_Close', data)
      }
      else if (data.Type.toLowerCase() === 'ptl_off') {
        if (data.Data.Tag == this.CurrentGoods.ToLoc) {
          this.CompleteTaskCIDButton()
        }
      } else {
        this.$message({
          type: 'error',
          message: 'WET消息错误'
        });
      }
    },
    // 
    async PTL_Lighting (LocationId, Color, Qty = 0) {
      const params = {
        "Id": (LocationId || '').toString() + '_' + new Date().getTime().toString(),
        "Type": "PTL_Lighting",
        "Data": {
          "Tag": LocationId,
          "Num": (Qty || '').toString(),
          "Mode": "1",
          "Color": Color,
          "Updown": "2",
          "Locator": "",
          "Message": (this.CurrentGoods.SkuId || ''),
          "PressOff": "1"
        }
      }
      if ((LocationId || '') != '') {
        this.$message({
          type: 'warning',
          message: '发送点亮库位【' + LocationId.toString() + '】信号'
        });
        this.ws.ptl_ws.send(JSON.stringify(params))
      }
    },
    async PTL_Close (LocationId) {
      const params = {
        "Id": new Date().getTime().toString(),
        "Type": "PTL_Close",
        "Data": {
          "Tag": LocationId
        }
      }
      this.ws.ptl_ws.send(JSON.stringify(params))
    },
    async PTL_OFF (LocationId, flag = false) {
      this.PTL_Close(LocationId)
      //   this.scanInputMethod('OrderID', false)
      //   if (flag) {
      //     this.GETTaskInfo()
      //   }
    },
    // WEBSOCKET结束
    getUrlPath () {
      let wPath = window.document.location.href;
      // 获取当前页面主机地址之后的目录，如：/admin/index
      let pos = wPath.indexOf(this.$route.path);
      // 获取主机地址，如：http://localhost:8080
      this.localhostPath = wPath.substring(0, pos).split('#')[0];
      this.localhostPath = this.localhostPath.substring(0, this.localhostPath.length - 1);
    },
    audioPlay (value) {
      this.audioPaly = value
      setTimeout(() => {
        this.audioPaly = ''
      }, 10)
    },
    enterScanInput () {
      if (!this.checkInputEmpty()) {
        return
      }
      const value = this.scanInput.replace(/\ +/g, "").replace(/[\r\n]/g, "");
      this.scanInput = value
      // SKU编码
      if (this.scanType == 'SkuID') {
        this.ScanSku(value)
      }
      // 扫描源箱
      else if (this.scanType == 'CID') {
        this.ScanCID(value)
      } else if (this.scanType == 'BoxCode') {
        this.ScanBoxCode(value)
      } else {
        this.$message({
          message: '系统错误，请刷新当前页面',
          type: 'error'
        });
        return
      }
      this.$nextTick(() => {
        this.$refs.scanInputfocus.focus()
      })
    },
    // 库位图展示
    LocationSearch (value, type) {
      const params = {
        UserId: this.UserInfo.UserId,
        LocationId: value,
        time: Date.parse(new Date())
      }
      GETLocationInfo(params).then(res => {
        var result = res.data.data[0]
        if (res.data.code == 0) {
          this.audioPlay('ok')
          this.Imag[type] = this.ImageViewerUrl(result.LRow, result.LColumn, result.LLayer)
          this.Imag['ExchangeAreaImag'] = this.ExchangeAreaImagUrl(result.LRow, result.LColumn, result.LLayer)
        } else {
          this.audioPlay('notexist')
          this.$message({
            message: '目标库位错误，请确定库位是否正确',
            type: 'error'
          });
        }
      }).catch(error => {
        throw error
      })
    },
    ImageViewerUrl (LRow, LColumn, LLayer) {
      try {
        return require('../assets/imag/shewc/' + LColumn + '-' + LLayer + '.png')
      } catch (e) {
        console.log('ImageViewerUrl', e.toString())
        return ''
      }
    },
    ExchangeAreaImagUrl (LRow, LColumn, LLayer) {
      try {
        // 面朝播种位。背后为右  右为单数  左为双
        let imag = ''
        if ((parseInt(LRow) % 2)) {
          imag = 'right'
        } else {
          imag = 'left'
        }
        return require('../assets/imag/shewc/' + imag + '.png')
      } catch (e) {
        console.log('ImageViewerUrl', e.toString())
        return ''
      }
    },
    ImageCIDSearch (value, type, status = true) {
      try {
        status = value.split('-').length === 1
        if (status) {
          value = [1, 1]
        } else {
          value = [6, value.split('-')[1]]
        }
        this.Imag[type] = require('../assets/imag/tote/' + parseInt(value[0]) + '-' + parseInt(value[1]) + '.png')
      } catch (error) {
        this.Imag[type] = require('../assets/imag/tote/1-1.png')
      }

      //this.ImageViewerUrl(0,parseInt(value[0]),parseInt(value[1]))
    },
    // 改变扫描框
    scanInputMethod (newType, flag = false) {
      if (this.scanInputType[newType] === undefined) {
        return
      }
      clearTimeout(this.timer)
      this.timer = null
      if (newType == 'OrderID') {
        this.CurrentGoods = {}
        this.BillId = ''
        // 全部应扫描商品
        this.AllGoods = []
        // 已扫描商品
        this.ScannedGoods = []
        // 显示扫描记录
        this.ScanRecord = []
        // 页面显示应扫描数
        this.scansTotalNum = 0
        this.Imag.OriginalCIDImag = ''
        this.Imag = {
          OriginalLocationImag: '',
          OriginalCIDImag: '',
          TargetLocationImag: '',
          TargetCIDImag: ''
        }
        // 页面显示当前已扫描数
        this.scansNum = 0
        this.WarehouseId = ''
        this.StorerId = ''
        this.ImgUrl = ''
        this.disabledFlagTask = true
        this.disabledFlag = true
        this.BatchNoFlag = false
        if (this.$route.name == 'InventoryOPT' && flag) {
          this.GETTaskTimer()
        }
      }
      this.scanInput = ''
      this.scanInputPlaceholder = this.scanInputType[newType];
      this.scanType = newType;
    },
    // 点击计算器验证
    clickCalculator () {
      if (this.scanType == 'OK') {
        this.CalculatorDialogVisible = true
        return
      }
      this.audioPlay('error')
      this.$message({
        message: '获取订单并且扫描SKU后才能对数量进行操作',
        type: 'error'
      });
    },
    // 检查输入扫描框是否为空
    checkInputEmpty () {
      if (this.scanInput == '') {
        this.audioPlay('error')
        this.$message({
          message: '请检查扫描框内容是否为空',
          type: 'error'
        });
        return false
      }
      return true
    }
  },
  watch: {
    searchVal: function (val) {
      console.log(val); // 接收父组件的值
      this.WindowsSize = val;
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.my-label {
  font-size: 1.3vw;
  width: 10vw;
  /* font-weight: 550 !important; */
  text-align: center !important;
  color: #000000 !important;
}

.my-content {
  color: #000000;
  font-size: 1.3vw;
  /* font-weight: 550 !important; */
  width: 40vw;
}
</style>
<style scoped lang="scss">
.card_box {
  margin-top: 5px;
}

.card_button {
  margin-top: 20px;
  height: 10vh;
  border: none;
  display: flex;
  margin-left: 6vw;

  .el-card__body {
    & > .el-button {
      margin-left: 1vw;
    }
  }
}

.radioPrivate {
  /deep/.el-radio-button {
    border-radius: 4px;
    width: 100%;

    .el-radio-button__inner {
      font-size: 2vw;
      border-left: 1px solid #dcdfe6;
      margin-top: 2vh;
      width: 100%;
    }
  }
}

.dialogTitle {
  /deep/.el-dialog__title {
    font-size: 1.5vw;
  }
}

.box-card_detail {
  height: 50vh;
}

.paddingStyle {
  /deep/.el-card__body {
    padding: 0px !important;
  }
}

.dialog_commit {
  .el-form {
    .el-form-item {
      /deep/.el-form-item__label {
        font-size: 2.5vh;
        line-height: 4vh;
      }

      .el-form-item__content {
        .el-input {
          /deep/.el-input__inner {
            height: 5vh;
            font-size: 2.5vh;
          }
        }
      }
    }
  }
}

.scanSkuDialog {
  /deep/.el-dialog__header {
    .el-dialog__title {
      font-size: 1.3vw;
    }
  }

  .el-dialog__body {
    span {
      font-size: 1.3vw;
    }
  }
}

.ItemNumInfo {
  font-size: 7.5vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #ff0000;
  margin-top: 2vh;
}

.ItemNumlabel {
  font-size: 3vh;
  margin-top: 1vh;
}

.ItemNumInfoDetail {
  font-size: 3vh;
  margin-top: 2vh;
  // border: 1px solid #CCCCCC;
}

.imageClass {
  .el-image {
    // &>img {
    /deep/.el-image__inner {
      height: 100%;
      width: 100%;
      margin-top: 5vh;
    }
  }
}

.rotateClass {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: -5vh;

  .el-image {
    transform: rotate(90deg) !important;
    /deep/.el-image__inner {
      height: 100%;
      width: 15.5vw;
    }
  }
}

.imageClass_detail {
  height: 50vh;
}
.buttonClass {
  width: 200px;
  height: 70px;
  font-size: 25px;
}

// .pagination {
// 	margin-top: 20px;
// 	text-align: right;
// }
// .el-form-item {
//     margin-bottom: 0px !important;
// }
// .el-form {
// 	display: flex;
// }
// 顶部扫描框
.headerInputClass {
  height: 11vh;

  /deep/ .el-input__inner {
    height: 100%;
    font-size: calc(100vh - 93vh);
    background-color: rgb(84, 105, 122);
    color: #ffffff;
  }

  /deep/ .el-input__inner::-webkit-input-placeholder {
    color: #ffffff;
  }
}

.el-message-box {
  .el-message-box__content {
    .el-message-box__container {
      .el-message-box__message {
        & > p {
          font-size: 25px;
        }
      }
    }
  }
}

// 卡片头部
/deep/.el-card__header {
  padding: 8px 32px;
}
.image_height {
  /deep/.el-card__body {
    height: 20vh;
  }
}

.image_Or {
  position: relative;
  height: 40vh;
  width: 44vw;
  margin-top: 2vh;
  .TargetLocationImag1 {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .TargetLocationImag {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0);
  }
  .el-image {
    // &>img {
    /deep/.el-image__inner {
      height: 100%;
      width: 100%;
    }
  }
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
